<!-- 水质标准管理 -->
<style lang="less">
.waterStand {
  margin: 15px;
}
</style>


<template>
  <div class="waterStand">
    <Card :bordered="false">
      <p slot="title">综合配置 > <span class="select-font">水质标准管理</span>
      </p>
    </Card>
    <div class="">
      <Table :data="waterStandData"
             :columns="theadArr"
             stripe></Table>
    </div>
    <Modal v-model="standModal"
           :mask-closable="false"
           title="修改水质标准"
           @on-ok="ok">
      <Form :model="modelItem"
            :label-width="80">
        <Form-item label="一类标准"
                   prop="level_1">
          <Input v-model="modelItem.level_1"
                 :maxlength="8"
                 placeholder="请输入一类标准"></Input>
        </Form-item>
        <Form-item label="二类标准"
                   prop="level_2">
          <Input v-model="modelItem.level_2"
                 :maxlength="8"
                 placeholder="请输入二类标准"></Input>
        </Form-item>
        <Form-item label="三类标准"
                   prop="level_3">
          <Input v-model="modelItem.level_3"
                 :maxlength="8"
                 placeholder="请输入三类标准"></Input>
        </Form-item>
        <Form-item label="四类标准"
                   prop="level_4">
          <Input v-model="modelItem.level_4"
                 :maxlength="8"
                 placeholder="请输入四类标准"></Input>
        </Form-item>
        <Form-item label="五类标准"
                   prop="level_5">
          <Input v-model="modelItem.level_5"
                 :maxlength="8"
                 placeholder="请输入五类标准"></Input>
        </Form-item>
      </Form>
    </Modal>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
export default {
  data() {
    return {
      standList: '/syn/qulitylevel/list',
      standEdit: '/syn/qulitylevel/edit',
      waterStandData: [],
      theadArr: [
        {
          title: '指标',
          key: 'name',
        },
        {
          title: '一类标准',
          key: 'level_1',
        },
        {
          title: '二类标准',
          key: 'level_2',
        },
        {
          title: '三类标准',
          key: 'level_3',
        },
        {
          title: '四类标准',
          key: 'level_4',
        },
        {
          title: '五类标准',
          key: 'level_5',
        },
        {
          title: '操作',
          render: (h, params) => {
            if (params.row.is_used == '1') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.use(params.row, 0);
                      },
                    },
                  },
                  '确定启用'
                ),
              ]);
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'warning',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.use(params.row, 1);
                      },
                    },
                  },
                  '取消启用'
                ),
              ]);
            }
          },
        },
      ],
      modelItem: {},
      standModal: false,
      saveRow: {},
    };
  },
  methods: {
    getStand() {
      let params = {
        data: {},
        url: this.standList,
        token: storage.session.get('token'),
        success: res => {
          this.waterStandData = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
    edit(row) {
      this.saveRow = row;
      this.standModal = true;
      this.modelItem.level_1 = row.level_1;
      this.modelItem.level_2 = row.level_2;
      this.modelItem.level_3 = row.level_3;
      this.modelItem.level_4 = row.level_4;
      this.modelItem.level_5 = row.level_5;
    },
    ok() {
      this.saveRow.level_1 = this.modelItem.level_1;
      this.saveRow.level_2 = this.modelItem.level_2;
      this.saveRow.level_3 = this.modelItem.level_3;
      this.saveRow.level_4 = this.modelItem.level_4;
      this.saveRow.level_5 = this.modelItem.level_5;
      this.saveRow.is_used = 1;
      let params = {
        data: this.saveRow,
        url: this.standEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.standModal = false;
            this.getStand();
            this.$Message.success({
              content: '修改成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    use(row, type) {
      row.is_used = type;
      let params = {
        data: row,
        url: this.standEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.standModal = false;
            this.getStand();
            if (type === 0) {
              this.$Message.success({
                content: '启用成功',
              });
            } else {
              this.$Message.success({
                content: '取消成功',
              });
            }
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
  },
  mounted() {
    this.getStand();
  },
};
</script>
